<template>
  <div>
    <basic-page-vxe
      ref="basePage"
      list-api="queryGenerator"
      del-api="deleteGenerator"
      :search-form="basicData.searchForm"
      :search-handle="basicData.searchHandle"
      :columns="basicData.columns"
      @selectionChange="handleSelectionChange"
    />
    <el-dialog :close-on-click-modal="false" :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible">
      <el-form ref="dataForm" :rules="rules" :model="temp" label-position="right" label-width="90px" style="width: 100%">
        <el-form-item label="模块名" prop="moduleName">
          <el-input v-model="temp.moduleName" placeholder="请输入" minlength="3" maxlength="64" clearable />
        </el-form-item>
        <el-form-item label="服务名" prop="serviceName">
          <el-input v-model="temp.serviceName" placeholder="请输入" minlength="3" maxlength="64" clearable />
        </el-form-item>
        <el-form-item label="包名" prop="packageName">
          <el-input v-model="temp.packageName" placeholder="请输入" minlength="3" maxlength="64" clearable />
        </el-form-item>
        <el-form-item label="实体名" prop="entityName">
          <el-input v-model="temp.entityName" placeholder="请输入" minlength="3" maxlength="64" clearable />
        </el-form-item>
        <el-form-item label="表名" prop="tableName">
          <el-input v-model="temp.tableName" placeholder="请输入" minlength="3" maxlength="64" clearable />
        </el-form-item>
        <el-form-item label="主键名" prop="idName">
          <el-input v-model="temp.idName" placeholder="请输入" minlength="3" maxlength="64" clearable />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">
          取消
        </el-button>
        <el-button type="primary" @click="dialogStatus==='create'?createData():updateData()">
          确定
        </el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { addGenerator, updateGenerator, generateResource } from '@/api/devtool'
import { saveAs } from 'file-saver'
export default {
  name: 'Generator',
  components: {
  },
  directives: {},
  filters: {},
  data() {
    return {
      basicData: {

        columns: [
          { type: 'selection' },
          { config: { title: '模块名', field: 'moduleName' }},
          { config: { title: '服务名', field: 'serviceName' }, type: 'copy' },
          { config: { title: '包名', field: 'packageName' }, type: 'copy' },
          { config: { title: '实体名', field: 'entityName' }},
          { config: { title: '表名', field: 'tableName' }, type: 'copy' },
          { config: { title: '主键名', field: 'idName' }},
          { config: { title: '创建日期', width: '160', field: 'createTime' }, type: 'time' },
          { config: { title: '操作', field: 'opt', width: '180' }, type: 'render',
            render: (h, scope) => {
              return (
                <div>
                  <el-button plain size='mini' type='primary' v-permission="'update'" onClick={() => this.handleUpdate(scope.row)}><i class='el-icon-edit'></i> 编辑</el-button>
                  <el-button plain size='mini' type='danger' v-permission="'delete'" onClick={() => this.$refs.basePage.handleDelete(scope.row)}><i class='el-icon-delete'></i> 删除</el-button>
                </div>
              )
            }
          }
        ],
        searchData: {},
        searchForm: [
          { type: 'Input', label: '模块名', prop: 'moduleName', width: '180px' },
          { type: 'Input', label: '服务名', prop: 'serviceName', width: '180px' }
        ],
        searchHandle: [
          { label: '新增', type: 'success', icon: 'el-icon-plus', permission: 'add', handle: () => { this.handleCreate() } },
          { label: '生成', type: 'success', icon: 'el-icon-printer', permission: 'generate', handle: () => { this.handleeGnerate() } }
        ]

      },
      detail: {},
      roleIdOptions: [],
      orgIdOptions: [],
      orgName: '',
      temp: {
        id: undefined,
        moduleName: '',
        serviceName: '',
        packageName: '',
        entityName: '',
        tableName: '',
        idName: ''
      },
      dialogFormVisible: false,
      dialogStatus: '',
      textMap: {
        update: '编辑',
        create: '新增'
      },
      rules: {
        moduleName: [{ required: true, message: '请输入模块名！', trigger: 'blur' }],
        serviceName: [{ required: true, message: '请输入服务名！', trigger: 'blur' }],
        packageName: [{ required: true, message: '请输入包名！', trigger: 'blur' }],
        entityName: [{ required: true, message: '请输入实体名！', trigger: 'blur' }],
        tableName: [{ required: true, message: '请输入表名！', trigger: 'blur' }],
        idName: [{ required: true, message: '请输入主键名！', trigger: 'blur' }]
      },
      downloadLoading: false,
      selectInfo: []
    }
  },
  computed: {},
  created() {},
  mounted() {},
  methods: {
    // 业务逻辑
    resetTemp() {
      this.temp = {
        id: undefined,
        moduleName: '',
        serviceName: '',
        packageName: '',
        entityName: '',
        tableName: '',
        idName: ''
      }
    },
    handleCreate() {
      this.resetTemp()
      this.orgName = ''
      this.dialogStatus = 'create'
      this.dialogFormVisible = true
      this.$nextTick(() => {
        this.$refs['dataForm'].clearValidate()
      })
    },
    createData() {
      this.$refs['dataForm'].validate((valid) => {
        if (valid) {
          addGenerator(this.temp).then(response => {
            this.dialogFormVisible = false
            this.$notify({
              title: '成功',
              message: '新增成功',
              type: 'success',
              duration: 2000
            })
            this.handleReset()
          })
        }
      })
    },
    handleUpdate(row) {
      this.temp = Object.assign({}, row) // copy obj
      this.dialogStatus = 'update'
      this.dialogFormVisible = true
      this.$nextTick(() => {
        this.$refs['dataForm'].clearValidate()
      })
    },
    updateData() {
      this.$refs['dataForm'].validate((valid) => {
        if (valid) {
          const tempData = Object.assign({}, this.temp)
          updateGenerator(tempData).then(response => {
            this.dialogFormVisible = false
            this.$notify({
              title: '成功',
              message: '编辑成功',
              type: 'success',
              duration: 2000
            })
            this.handleReset()
          })
        }
      })
    },
    // 刷新
    handleReset() {
      this.$refs.basePage.getList()
    },
    handleSelectionChange(val) {
      this.selectInfo = JSON.parse(JSON.stringify(val))
    },
    handleeGnerate() {
      if (this.selectInfo.length === 0) {
        this.$notify({
          title: '警告',
          message: '请勾选需要生成的记录',
          type: 'warning',
          duration: 2000
        })
      } else {
        const idArr = this.selectInfo.map((item) => {
          return item.id
        })
        const formData = new FormData()
        for (const k of idArr) {
          formData.append('id', k)
        }
        generateResource(formData).then(response => {
          saveAs(response, '代码生成.zip')
        })
      }
    }
  }
}
</script>

<style scoped>
.warning{
  text-align: center;
  font-size: 20px;
}
.el-icon-info{
  font-size: 30px;
  color: orange;
}
</style>
